<html>

<head>
    <meta charset="utf-8" />
    <title>SpaceEye</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <!-- Link Swiper's CSS -->
    <link href="./css/style_of_index.css" rel="stylesheet" type="text/css">

    <link href="./css/nav.css" rel="stylesheet" type="text/css">
    <script>
        window.onload = function () {
            const bottom = document.querySelector(".nav-bottom");
            const navMenu = document.querySelector(".nav-menu");

            bottom.addEventListener("click", mobileMenu);

            function mobileMenu() {
                bottom.classList.toggle("active");
                navMenu.classList.toggle("active");
            }
        }
    </script>

    <style scoped>
        .flyText {
            width: 8em;
            margin: auto;
            white-space: nowrap;
            animation: textIn 8s both;
        }

        @keyframes textIn {
            0% {
                opacity: 0;
                letter-spacing: -200px;
            }

            60% {
                letter-spacing: 5px;
            }

            100% {
                opacity: 1;
                letter-spacing: 0;
            }
        }
    </style>

</head>

<body>
    <header class="header">
        <nav class="navbar">
            <a href="index.html" class="nav-logo">SpaceEye</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="history.html" class="nav-link">航天历史</a>
                </li>
                <li class="nav-item">
                    <a href="human.html" class="nav-link">重要人物</a>
                </li>
                <li class="nav-item">
                    <a href="News.html" class="nav-link">近期资讯</a>
                </li>
                <li class="nav-item">
                    <a href="aircraft.html" class="nav-link">航天器展示</a>
                </li>
                <li class="nav-item">
                    <a href="emailsender.html" class="nav-link">太空漂流瓶</a>
                </li>
                <li></li>
            </ul>
            <div class="nav-bottom">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>

    <div class="flyText">
        <div class="index">
            <div class="container">
                <img src="./soures/images/h1.png" alt="">

                <img src="./soures/images/h2.png" alt="">
            </div>
        </div>
    </div>
</body>

</html>